$(document).ready(function () {
  initApparatus()

  initForm()
})

/** 步数 */
var stepNum = 1;
/** 下一步 */
function nextStep() {
  if (nextValidate()) {
    var stepDom1 = $('.step-1')
    var stepDom2 = $('.step-2')
    var sItem = $('.schedule-item')

    for (var i = 0; i < sItem.length; i++) {
      let item = sItem[i]
      if (Array.prototype.slice.call(item.classList).indexOf('select') >= 0) {
        sItem[i].classList.remove('select')
        sItem[i + 1].classList.add('select')
        break
      }
    }

    $(stepDom1).hide()
    $(stepDom2).removeClass('hide')
    $(stepDom2).show()
  }
}

/** 上一步 */
function upStep() {
  var stepDom1 = $('.step-1')
  var stepDom2 = $('.step-2')

  var sItem = $('.schedule-item')

  for (var i = 0; i < sItem.length; i++) {
    let item = sItem[i]
    if (Array.prototype.slice.call(item.classList).indexOf('select') >= 0) {
      sItem[i].classList.remove('select')
      sItem[i - 1].classList.add('select')
      break
    }
  }

  $(stepDom2).hide()
  $(stepDom1).show()
}

/** 人证比对开关 */
var comparisonSwitch = false;
/** 人证比对开关 cheng 事件 */
function comparisonSwitchFn(e) {
  var checked = e.checked
  comparisonSwitch = checked

  if (!checked) {
    $('#comparison').hide()
    $('#headImage').show(100)
  } else {
    $('#comparison').show(100)
    $('#headImage').hide()
  }
}

/** 设备选择 */
var apparatusSelect = 0;
/** 设备列表 */
var apparatusList = [{
    label: '禾三高拍仪【HS7323D、H520】',
    value: 0
  },
  {
    label: '张三高拍仪【HS7323D、H520】',
    value: 1
  },
  {
    label: '李四高拍仪【HS7323D、H520】',
    value: 2
  },
  {
    label: '王五高拍仪【HS7323D、H520】',
    value: 3
  },
  {
    label: '赵六高拍仪【HS7323D、H520】',
    value: 4
  }
];
/** init 设备 */
function initApparatus() {
  var textDom = $('#apparatusDropdown')
  var itemList = $('.apparatus-list.dropdown-menu')[0]
  $(itemList).html('')

  for (var i = 0; i < apparatusList.length; i++) {
    var item = apparatusList[i]

    var aDom = createDom('a')
    aDom.href = '#!'
    aDom.innerText = item.label
    aDom.className = 'dropdown-item';
    (function (val) {
      $(aDom).on('click', function () {
        selectApparatusOption(val)
      })
    })(item)

    if (apparatusSelect == item.value) {
      aDom.classList.add('select')
      $(textDom).text(item.label)
    }

    itemList.appendChild(aDom)
  }
}
/** 选择设备选项 */
function selectApparatusOption(item) {
  apparatusSelect = item.value

  console.log('选择设备', item)
  initApparatus()
}

/** 类别选择 */
var typeSelect = 0;
/** 切换选择 */
function switchTypeSelect(e) {
  typeSelect = e.value
  e.classList.add('select')

  if (e.value == 0) {
    $('.type-switch .btn[value = 1]')[0].classList.remove('select')
  } else {
    $('.type-switch .btn[value = 0]')[0].classList.remove('select')
  }
}

/** init 表单 */
function initForm() {
  // 性别选择
  xmSelect.render({
    el: '#sexSelect',
    tips: '请选择性别',
    radio: true, // 是否开启单选
    clickClose: true, // 是否在选择完毕之后关闭下拉菜单
    theme: {
      color: '#409eff',
    },
    model: {
      icon: 'hidden',
      label: {
        type: 'text',
        block: {
          //最大显示数量, 0:不限制
          showCount: 0,
          //是否显示删除图标
          showIcon: false,
        }
      }
    },
    data: [{
        name: '男',
        value: 1,
        selected: true
      },
      {
        name: '女',
        value: 2
      }
    ],
    on: function (data) {
      //arr:  当前已选中的数据
      var arr = data.arr;
      //change, 此次选择变化的数据,数组
      var change = data.change;
      //isAdd, 此次操作是新增还是删除
      var isAdd = data.isAdd;

      if (!isAdd) {
        arr.push(change[0])
      }
    }
  })

  // 一卡通开户行
  xmSelect.render({
    el: '#openingBank',
    tips: '请选择一卡通开户行',
    radio: true, // 是否开启单选
    clickClose: true, // 是否在选择完毕之后关闭下拉菜单
    theme: {
      color: '#409eff',
    },
    model: {
      icon: 'hidden',
      label: {
        type: 'text',
        block: {
          //最大显示数量, 0:不限制
          showCount: 0,
          //是否显示删除图标
          showIcon: false,
        }
      }
    },
    data: [{
        name: '青海农信',
        value: 1,
        selected: true
      },
      {
        name: '青海农信1',
        value: 2
      },
      {
        name: '青海农信2',
        value: 3
      },
      {
        name: '青海农信3',
        value: 4
      }
    ],
    on: function (data) {
      //arr:  当前已选中的数据
      var arr = data.arr;
      //change, 此次选择变化的数据,数组
      var change = data.change;
      //isAdd, 此次操作是新增还是删除
      var isAdd = data.isAdd;

      if (!isAdd) {
        arr.push(change[0])
      }
    }
  })

  initDatePick()

  // 人证比对、头像切换 init
  $('#comparison').removeClass('hide')
  if (!comparisonSwitch) {
    $('#comparison').hide()
    $('#headImage').show()
  } else {
    $('#comparison').show()
    $('#headImage').hide()
  }

  // 校验
  $('#firstStepForm').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      // 名称校验
      name: {
        validators: {
          regexp: {
            regexp: /^[\u0391-\uFFE5A-Za-z]+$/,
            message: '购机者名称请输入中文或字母！'
          }
        }
      },
      // 身份证号校验
      idCrad: {
        validators: {
          notEmpty: {
            message: ' '
          },
          callback: {
            message: '请输入正确的身份证号！',
            callback: function (value, validator) {
              return isIdCard(value)
            }
          }
        }
      }
    }
  });

  $('#twoStepForm').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      // 名称校验
      name: {
        validators: {
          regexp: {
            regexp: /^[\u0391-\uFFE5A-Za-z]+$/,
            message: '购机者名称请输入中文或字母！'
          }
        }
      },
      // 身份证号校验
      idCrad: {
        validators: {
          notEmpty: {
            message: ' '
          },
          callback: {
            message: '请输入正确的身份证号！',
            callback: function (value, validator) {
              return isIdCard(value)
            }
          }
        }
      }
    }
  });
}

/** 上传的图片 */
var imgs = [];
/** 图片上传 */
function uploadImage(e) {
  var fileList = e.files;
  for (var i = 0; i < fileList.length; i++) {
    imgs.push(fileList[i])
  }

  if (fileList) {
    [].forEach.call(fileList, readAndPreview)
  }

  if (!fileList.length) {
    $.message({
      type: 'error',
      message: '请选择图片'
    })
    return
  }


  /** 渲染图片 */
  function readAndPreview(file) {
    // 确保 `file.name` 符合我们要求的扩展名
    if (/\.(jpe?g)$/i.test(file.name)) {
      //这里是读取到input返回出来的fileList中文件
      var reader = new FileReader();

      reader.addEventListener("load", function () {
        var imgDom = new Image();
        var result = this.result;
        imgDom.className = 'img-c';

        imgDom.title = file.name;
        imgDom.style = 'width: 100%; height: 100%;';
        imgDom.onclick = function () {
          imagePreview(result);
        }

        imgDom.src = result;

        $('#idCradImg').html('');
        $('#idCradImg').append(imgDom);
      }, false)

      //调用readAsDataURL()方法拿到result
      reader.readAsDataURL(file);
    } else {
      $.message({
        type: 'error',
        message: '请选择正确格式的图片'
      })
    }
  }
}


/** 日期时间相关 */
function initDatePick() {
  // 申请日期
  $('#applyTime').on('click', function () {
    var _this = this;
    var reportTimeType = 5;
    var double = false;
    if (!$(this).next('[name="datePicker"]').length) {
      $(this).after("<div class='datePicker-applyTime' name='datePicker'></div>");
      datePicker = $('.datePicker-applyTime').datePicker({
        reportTimeType: reportTimeType, // 4代表小时、5代表天、6代表周、7代表月、8代表季、9代表年
        startDom: $(_this).find('input[name="applyTime"]'), // 开始时间要赋值的DOM元素
        format: 'YYYY-MM-DD HH:mm:ss',
        fastTime: fastTime[double][reportTimeType], // 快速选择的时间
        isFast: true, // 是否显示快速选择的选项
        isDouble: double, // 是否双选择的日历
        disabledDate: true, // 是否禁用以后的时间
        showApplyButton: true,
        yes: function (startTime, endTime) { // 成功赋值前的回调可改变赋值的时间格式
        },
      });
    } else {
      if ($(this).next('[name="datePicker"]').hasClass('hide')) {
        $(this).next('[name="datePicker"]').removeClass('hide');
        datePicker.render();
      } else {
        $(this).next('[name="datePicker"]').addClass('hide');
      }
    }
  });
  // 监听点击其他地方关闭日期实现选择弹窗
  $(document).click(function (event) {
    let area = $('.datePicker-applyTime')
    let area1 = $('.wrap-time')
    if ($(event.target).closest(area).length > 0 || $(event.target).closest(area1).length > 0) {
      // console.log('在里边');
    } else {
      $('.datePicker-applyTime').addClass('hide')
    }
  })

  // 销售日期
  $('#buyTime').on('click', function () {
    var _this = this;
    var reportTimeType = 5;
    var double = false;
    if (!$(this).next('[name="datePicker"]').length) {
      $(this).after("<div class='datePicker-buyTime' name='datePicker'></div>");
      datePicker = $('.datePicker-buyTime').datePicker({
        reportTimeType: reportTimeType, // 4代表小时、5代表天、6代表周、7代表月、8代表季、9代表年
        startDom: $(_this).find('input[name="buyTime"]'), // 开始时间要赋值的DOM元素
        format: 'YYYY-MM-DD HH:mm:ss',
        fastTime: fastTime[double][reportTimeType], // 快速选择的时间
        isFast: true, // 是否显示快速选择的选项
        isDouble: double, // 是否双选择的日历
        disabledDate: true, // 是否禁用以后的时间
        showApplyButton: true,
        yes: function (startTime, endTime) { // 成功赋值前的回调可改变赋值的时间格式
        },
      });
    } else {
      if ($(this).next('[name="datePicker"]').hasClass('hide')) {
        $(this).next('[name="datePicker"]').removeClass('hide');
        datePicker.render();
      } else {
        $(this).next('[name="datePicker"]').addClass('hide');
      }
    }
  });
  // 监听点击其他地方关闭日期实现选择弹窗
  $(document).click(function (event) {
    let area = $('.datePicker-buyTime')
    let area1 = $('.wrap-time')
    if ($(event.target).closest(area).length > 0 || $(event.target).closest(area1).length > 0) {
      // console.log('在里边');
    } else {
      $('.datePicker-buyTime').addClass('hide')
    }
  })
}

/** 发票list */
var invoiceList = [];
/** 发票上传 */
function uploadInvoice(e) {
  console.log('上传发票', e);
  var inDom = $('.invoice-list .invoice-add')

  var fileList = e.files;
  for (var i = 0; i < fileList.length; i++) {
    invoiceList.push(fileList[i])
  }

  for (var i = 0; i < fileList.length; i++) {
    previewUploadImg(fileList[i], function (imgdom) {
      let dDom = createDom('div')
      dDom.className = 'invoice-item'
      dDom.appendChild(imgdom)
      $(inDom).before(dDom)
    })
  }
}


/** 下一步校验 */
function nextValidate() {
  $('#firstStepForm').data('bootstrapValidator').validate()
  $('#firstStepForm').bootstrapValidator('validate');

  var ispass = false
  ispass = $('#firstStepForm').data('bootstrapValidator').isValid()

  if (!ispass) {
    //没有通过校验
    console.log('未通过');
  } else {
    //通过校验，可进行提交等操作
    console.log('已通过');
  }

  return ispass
}


/** 保存 */
function saveSubmit() {
  $('#twoStepForm').data('bootstrapValidator').validate()
  $('#twoStepForm').bootstrapValidator('validate');
  console.log('保存')
}